<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-input
          placeholder="请输入手机号、用户名称"
          suffix-icon="el-icon-search"
          v-model="searchVal" style="width: 150px;">
        </el-input>
        <el-button type="info" plain @click="searchClk">搜索</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table
          ref="envGrid"
          border
          highlight-current-row
          @row-click="selectRow"
          @sort-change="sortClick"
          :data="tableData2"
          style="width: 100%">
          <el-table-column
            prop="userId"
            label="主键"
            sortable="custom"
            width="250">
          </el-table-column>
          <el-table-column
            prop="userName"
            sortable="custom"
            label="名称">
          </el-table-column>
          <el-table-column
            prop="phoneNum"
            sortable="custom"
            label="手机号">
          </el-table-column>
          <el-table-column
            prop="kidName"
            sortable="custom"
            label="子女">
          </el-table-column>
          <el-table-column
            prop="schoolAddr"
            label="学校地址">
          </el-table-column>
          <el-table-column
            prop="detailAddr"
            label="家庭地址">
          </el-table-column>
          <el-table-column
            prop="state"
            label="状态">
          </el-table-column>
          <el-table-column
            prop="createtime"
            sortable="custom"
            label="创建时间">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span>{{ scope.row.createTime | formatDate }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[10,50,100]"
          :page-size="10"
          layout="sizes, prev, pager, next"
          :total="totalCount">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import ElRow from "element-ui/packages/row/src/row";
  import ElCol from "element-ui/packages/col/src/col";
  import { post, formatDate } from "../../../util/util";

  export default {
    components: {
      ElCol,
      ElRow
    },
    methods: {
      selectRow (row) {
        this.$refs.envGrid.setCurrentRow(row);
        let idx = this.selectRows.indexOf(row);
        if (idx >= 0) {
          this.$refs.envGrid.clearSelection();
          this.selectRows.pop(row);
        } else {
          this.selectRows.push(row);
        }
      },
      handleSizeChange (val) {
        this.gridQueryParam.pageSize = val;
        this.requestData();
      },
      handleCurrentChange (val) {
        this.gridQueryParam.page = val;
        this.requestData();
      },
      sortClick (col) {
        this.gridQueryParam.sort = col.prop;
        this.gridQueryParam.order = ((col.order === "ascending") ? "asc" : "desc");
        this.requestData();
      },
      searchClk () {
        this.requestData();
      },
      requestData () {
        let that = this;
        let queryParam = that.gridQueryParam;
        let params = {
          "pageUtil.sort": !queryParam.sort ? "userId" : queryParam.sort,
          "pageUtil.order": !queryParam.order ? "asc" : queryParam.order,
          "pageUtil.pageId": !queryParam.page ? 1 : queryParam.page,
          "pageUtil.pageSize": !queryParam.pageSize ? 10 : queryParam.pageSize,
          "pageUtil.condRelat": queryParam.condRelat
        };
        if (this.searchVal) {
          params.phoneNum = that.searchVal;
          params.userName = that.searchVal;
          params["pageUtil.condRelat"] = "or";
        } else {
          params["pageUtil.condRelat"] = "and";
        }
        post("/admin/userMgr/list.do", params).then((res) => {
          if (res) {
            let data = res.data.data;
            that.tableData2 = data.rows;
            that.totalCount = data.total;
          }
        });
      }
    },
    data () {
      return {
        gridQueryParam: {
          page: 1,
          pageSize: 10,
          sort: "userId",
          order: "asc",
          condRelat: "and"
        },
        searchVal: "",
        currentPage: 1,
        pageSize: 10,
        totalCount: 0,
        tableData2: [],
        selectRows: []
      };
    },

    created () {
      this.requestData();
    },
    filters: {
      formatDate (time) {
        var date = new Date(time);
        return formatDate(date, "yyyy-MM-dd hh : mm");
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .el-table__body tr.current-row > td {
    background: #ffe48d !important;
  }
</style>
